<template>
	<view>
		<view class="tab">
			<view class="item" :class="{cur:tabCur==item.id}" @click="tabCur = item.id" v-for="item in tabs"
				:key="item.id">
				{{item.name}}
			</view>
		</view>
		<view class="section" v-show="tabCur==1">
			<view class="px-38 bg-white mt-18 py-50 primary size-26">
				您可以申请成为回收天使回收员，我们将在收到申请后48小时内审核，请确保您所提交信息的真实性，感谢您的支持。
			</view>
			<block v-if="cardShow==1">
				<view class="title">提交照片</view>
				<view class="id-card flex-between">
					<view class="card" @click="uploadid(1)">
						<image v-if="idoneimage" :src="baseUrl + idoneimage" mode="aspectFit"></image>
						<image v-else src="../../static/btn_renxiang@2x.png" mode="aspectFill"></image>
						<view>点击上传身份证人像面</view>
					</view>
					<view class="card" @click="uploadid(2)">
						<image v-if="idtwoimage" :src="baseUrl + idtwoimage" mode="aspectFit"></image>
						<image v-else src="../../static/btn_guohui@2x.png" mode="aspectFill"></image>
						<view>点击上传身份证国徽面</view>
					</view>
				</view>
			</block>
			<view class="title">提交资料</view>
			<view class="input-group input-group-1">
				<view class="item">
					<view class="label">头像</view>
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="item">
					<view class="label">姓名</view>
					<u-input type="text" v-model="nickname" border="none" placeholder="请输入您的姓名"></u-input>
				</view>
				<view class="item" v-if="cardShow==1">
					<view class="label">身份证</view>
					<u-input type="text" v-model="idnumber" border="none" placeholder="请输入您的身份证号"></u-input>
				</view>
				<view class="item">
					<view class="label">手机号</view>
					<u-input text="number" maxlength="11" v-model="phone" border="none" placeholder="请输入您的手机号">
					</u-input>
				</view>
			</view>
			<view class="input-group">
				<view class="item">
					<view class="label">期待工作区域</view>
					<!-- <picker mode="region" @change="selectArea">
						<view class="uni-input">{{ workcity || '请选择'}}</view>
					</picker> -->
					<view @click="showPCA" class="uni-input">{{province}} {{city}} {{district}}</view>
					<pcaPicker ref="pcaPicker" @confirm="selectArea"></pcaPicker>
				</view>
			</view>
			<!-- <view class="input-group">
				<view class="item" @click="uploadid(3)">
					<view class="label">上传保险单</view>
					<u-input type="text" border="none" placeholder="点击上传" disabled disabledColor="#ffffff"></u-input>
					<u-icon class="icon" name="arrow-right"></u-icon>
				</view>
				<image class="insuranceimage" @click="uploadid(3)" v-if="insuranceimage" :src="baseUrl + insuranceimage"
					mode="aspectFit"></image>
				<view class="item" @click="dateShow1=true">
					<view class="label">保单生效日期</view>
					<u-input type="text" border="none" v-model="time1" placeholder="请选择" disabled
						disabledColor="#ffffff"></u-input>
					<view class="icon">
						<u-icon name="arrow-right"></u-icon>
					</view>
					<u-datetime-picker :show="dateShow1" v-model="time1" @close="dateShow1 = false"
						@cancel="dateShow1 = false" @confirm="dateShow1 = false" mode="date">
					</u-datetime-picker>
				</view>
				<view class="item" @click="dateShow2=true">
					<view class="label">保单截止日期</view>
					<u-input type="text" border="none" v-model="time2" placeholder="请选择" disabled
						disabledColor="#ffffff"></u-input>
					<view class="icon">
						<u-icon name="arrow-right"></u-icon>
					</view>
					<u-datetime-picker :show="dateShow2" v-model="time2" @close="dateShow2 = false"
						@cancel="dateShow2 = false" @confirm="dateShow2 = false" mode="date">
					</u-datetime-picker>
				</view>
				<view class="item" @click="uploadDoc">
					<view class="label">上传协议照片</view>
					<u-input type="text" border="none" placeholder="点击上传" disabled disabledColor="#ffffff"></u-input>
					<u-icon class="icon" name="arrow-right"></u-icon>
				</view>
				<block v-if="images.length>0">
					<view class="flex-wrap">
						<view class="insuranceimage1" v-for="(item,index) in images" :key="index">
							<image :src="baseUrl + item" mode="aspectFit"></image>
							<view class="icon">
								<u-icon @click="del(index)" name="minus-circle-fill" color="red"></u-icon>
							</view>
						</view>
					</view>
				</block>
			</view> -->
			<label>
				<checkbox style="transform: scale(.6);" :checked="checked" @click="checked = !checked"
					color="#3BB061" />
				<text class="primary size-28" @click.stop="gotregaggrement">《回收员入驻须知》</text>
			</label>
			<view class="btn" @click="submitApply1">提交申请</view>
		</view>
		<!-- 回收站入驻 -->
		<view class="section" v-show="tabCur==2">
			<view class="px-38 bg-white mt-18 py-50 primary size-26">
				您可以申请入驻回收共享回收，我们将在收到申请后48小时内审核，请确保您所提交信息的真实性，感谢您的支持。
			</view>
			<view class="title">提交照片</view>
			<view class="id-card flex-between">
				<view class="card" @click="uploadid(4)">
					<image v-if="image" :src="baseUrl + image" mode="aspectFit"></image>
					<image v-else src="../../static/btn_mentou.png" mode=""></image>
					<view>门头照片</view>
				</view>
				<!-- <view class="card" @click="uploadid(2)">
					<image v-if="idtwoimage" :src="baseUrl + idtwoimage" mode="aspectFit"></image>
					<image  v-else src="../../static/btn_guohui@2x.png" mode=""></image>
					<view>点击上传身份证国徽面</view>
				</view> -->
			</view>
			<view class="title">提交资料</view>
			<view class="input-group input-group-1">
				<view class="item">
					<view class="label">姓名</view>
					<u-input type="text" v-model="nickname" border="none" placeholder="请输入您的姓名"></u-input>
				</view>
				<!-- <view class="item">
					<view class="label">身份证</view>
					<u-input type="number" v-model="idnumber" border="none" placeholder="请输入您的身份证号"></u-input>
				</view> -->
				<view class="item">
					<view class="label">手机号</view>
					<u-input text="number" maxlength="11" v-model="phone" border="none" placeholder="请输入您的手机号">
					</u-input>
				</view>
			</view>
			<view class="input-group">
				<view class="item">
					<view class="label">回收站名称</view>
					<u-input v-model="recylename" type="text" border="none" placeholder="请输入回收站名称"></u-input>
				</view>
				<view class="item">
					<view class="label">回收站地址</view>
					<view @click="selectMap" class="uni-input">{{ address || '请选择'}}</view>
				</view>
			</view>
			<view class="btn" @click="submitApply2">提交申请</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('../../common/qqmap-wx-jssdk.min.js')
	var qqmapsdk;
	export default {
		data() {
			return {
				cardShow: 0,
				userInfo: uni.getStorageSync('userInfo'),
				tabs: [{
						id: 1,
						name: '申请成为回收员'
					},
					{
						id: 2,
						name: '回收站入驻'
					},
				],
				tabCur: 1,
				area: '',
				checked: true,
				dateShow1: false,
				dateShow2: false,
				time1: '',
				time2: '',
				phone: '13800209384',
				idnumber: '142724198402080815',
				nickname: '李明',
				idoneimage: 'https://himg.bdimg.com/sys/portrait/item/wise.1.aa9a0681.2YK5xAdxNbji2wrO4fmzaQ.jpg',
				idtwoimage: 'https://himg.bdimg.com/sys/portrait/item/wise.1.aa9a0681.2YK5xAdxNbji2wrO4fmzaQ.jpg',
				province: '',
				city: '',
				district: '',
				province_code: '',
				city_code: '',
				district_code: '',
				insuranceimage: '', //保单照片
				baseUrl: '',
				recylename: '',
				latitude: '',
				longitude: '',
				address: '',
				image: '',
				images: [],
				protocol: '',
				classValue: '110101',
				classDataTree: cityCodes
			};
		},
		onShow() {
			if (!uni.getStorageSync('openid')) {
				uni.switchTab({
					url: '../user/user'
				})
				return
			}
			this.$api.configCard().then(res => {
				if (res.code == 1) {
					this.cardShow = res.data
				}
			})
		},
		onLoad() {
			this.baseUrl = this.$tools.baseUrl
			this.getProtocol()
			this.time1 = Number(new Date())
			this.time2 = Number(new Date())
			qqmapsdk = new QQMapWX({
				key: '3SHBZ-L37KD-YBY4H-PJHZY-KW5BF-NLB3U'
			});
		},
		watch: {
			time1(e) {
				var time = new Date(e);
				var y = time.getFullYear();
				var month = time.getMonth() + 1;
				var d = time.getDate();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				month = month < 10 ? ('0' + month) : month;
				m = m < 10 ? ('0' + m) : m;
				d = d < 10 ? ('0' + d) : d;
				this.time1 = `${y}-${month}-${d}`
			},
			time2(e) {
				var time = new Date(e);
				var y = time.getFullYear();
				var month = time.getMonth() + 1;
				var d = time.getDate();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				month = month < 10 ? ('0' + month) : month;
				m = m < 10 ? ('0' + m) : m;
				d = d < 10 ? ('0' + d) : d;
				this.time2 = `${y}-${month}-${d}`
			}
		},
		methods: {
			getProtocol() {
				this.$api.getProtocol().then(res => {
					this.protocol = res.data.protocol_file
				})
			},
			// 选择地区
			selectArea(e) {
				console.log(e)
				this.province = e.province
				this.city = e.city
				this.district = e.district
				this.province_code = e.province_code
				this.city_code = e.city_code
				this.district_code = e.district_code
			},
			uploadid(e) {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						this.$api.uploadImg(chooseImageRes).then(res => {
							console.log(res)
							if (e == 1) {
								this.idoneimage = res[0]
							} else if (e == 2) {
								this.idtwoimage = res[0]
							} else if (e == 3) {
								this.insuranceimage = res[0]
							} else if (e == 4) {
								this.image = res[0]
							}
						})
					}
				})
			},
			uploadDoc() {
				uni.chooseImage({
					count: 9,
					success: (chooseImageRes) => {
						this.$api.uploadImg(chooseImageRes).then(res => {
							console.log(res)
							this.images.push(...res)
						})
					}
				})
			},
			del(i) {
				this.images.splice(i, 1)
			},
			copy() {
				uni.setClipboardData({
					data: this.protocol,
					success: () => {
						this.$tools.toast('复制成功，请去下载')
					}
				})
			},
			submitApply1() {
				console.log(this.images.toString())
				if (!this.$tools.verifyName(this.nickname)) {
					return
				}
				if (!this.$tools.verifyIDcard(this.idnumber)) {
					this.$tools.toast('请输入正确的身份证号码')
					return
				}
				if (!this.$tools.verifyTelPhone(this.phone)) {
					return
				}
				if (!this.$tools.isEmpty(this.city, '请选择期待工作区域')) {
					return
				}
				if (!this.$tools.isEmpty(this.idoneimage, '请上传身份证正面')) {
					return
				}
				if (!this.$tools.isEmpty(this.idtwoimage, '请上传身份证反面')) {
					return
				}
				this.$api.recyclerApply({
					openid: uni.getStorageSync('openid'),
					idnumber: this.idnumber,
					phone: this.phone,
					headimage: this.userInfo.avatar,
					idoneimage: this.idoneimage,
					idtwoimage: this.idtwoimage,
					insuranceimage: this.insuranceimage,
					insurancestarttime: this.time1,
					insuranceendtime: this.time2,
					nickname: this.nickname,
					province: this.province,
					city: this.city,
					district: this.district,
					rid: this.rid,
					images: this.images.toString()
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.$tools.toast('提交成功，请耐心等待')
						setTimeout(() => {
							uni.redirectTo({
								url: '../applySuccess/applySuccess'
							})
						}, 1000)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			selectMap() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.address = res.address
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (res1) => {
								console.log(res1)
								this.city = res1.result.ad_info.district
							},
							fail: err => {
								console.log(err)
							}
						});
					}
				})
			},
			submitApply2() {
				if (!this.$tools.verifyName(this.nickname)) {
					return
				}
				// if(!this.$tools.verifyIDcard(this.idnumber)){
				// 	this.$tools.toast('请输入正确的身份证号码')
				// 	return
				// }
				if (!this.$tools.verifyTelPhone(this.phone)) {
					return
				}
				if (!this.$tools.isEmpty(this.address, '请选择回收站地址')) {
					return
				}
				if (!this.$tools.isEmpty(this.recylename, '请填写回收站名称')) {
					return
				}
				if (!this.$tools.isEmpty(this.image, '请上传门头照片')) {
					return
				}
				// if(!this.$tools.isEmpty(this.idtwoimage,'请上传身份证反面')){
				// 	return
				// }
				this.$api.recycleBinApply({
					openid: uni.getStorageSync('openid'),
					// idnumber:this.idnumber,
					phone: this.phone,
					// idoneimage:this.idoneimage,
					// idtwoimage:this.idtwoimage,
					image: this.image,
					nickname: this.nickname,
					recylename: this.recylename,
					longitude: this.longitude,
					latitude: this.latitude,
					address: this.address,
					city: this.city,
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.$tools.toast('提交成功，请耐心等待')
						setTimeout(() => {
							uni.redirectTo({
								url: '../applySuccess/applySuccess'
							})
						}, 1000)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			gotregaggrement() {
				uni.navigateTo({
					url: '../regaggrement/regaggrement'
				})
			},
			showPCA(e){
				this.$refs.pcaPicker.show();
			}
		}
	}
</script>

<style lang="scss">
	.tab {
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: var(--staus-bar);
		/* #endif */
		right: 0;
		z-index: 100;
		line-height: 88upx;
		display: flex;
		justify-content: space-between;
		background: #fff;

		.item {
			flex: 1;
			text-align: center;
			font-size: 30upx;
			color: #979797;
		}

		.cur {
			color: #fff;
			background: $color-primary;
		}
	}

	.section {
		padding: 88upx 0 40upx;

		.title {
			font-size: 30upx;
			font-weight: 500;
			color: #222222;
			padding: 40upx 40upx 26upx;
		}

		.id-card {
			padding: 0 40upx 18upx;

			.card {
				border-radius: 12upx;

				image {
					width: 308upx;
					height: 184upx;
					padding: 20upx 10upx;
					background: #FFFFFF;
					border-radius: 12upx;
				}

				view {
					text-align: center;
					font-size: 28upx;
					font-weight: 400;
					color: #979797;
					margin-top: 20upx;
				}
			}
		}

		.input-group {
			background: #fff;
			margin-bottom: 20upx;

			.insuranceimage {
				width: 300upx;
				height: 200upx;
				margin-left: 40upx;
				margin-top: 20upx;
				background: #f5f5f5;
				position: relative;
			}

			.item {
				display: flex;
				align-items: center;
				height: 116upx;
				border-bottom: 1upx solid #F6F6F6;
				padding: 0 42upx;
				position: relative;

				.label {
					width: 240upx;
					font-size: 30upx;
					font-weight: 400;
					color: #222222;
				}


				.avatar {
					width: 80upx;
					height: 80upx;
					border-radius: 100%;
				}

				/deep/ .uni-input {
					flex: 1;
					width: 100%;
				}

				.icon {
					position: absolute;
					right: 40upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			&-1 {
				.item {
					.label {
						width: 140upx;
					}
				}
			}
		}

		.btn {
			width: 524upx;
			line-height: 96upx;
			margin: 20upx auto;
		}
	}

	.flex-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.insuranceimage1 {
		position: relative;
		margin-left: 40upx;
		margin-top: 20upx;


		image {
			width: 300upx;
			height: 200upx;
			background: #f5f5f5;
		}

		.icon {
			position: absolute;
			right: 10upx;
			top: 10upx;
		}
	}
</style>
